<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07个人简历练习</title>
</head>
<body>

<table border="1">
    <caption>个人简介</caption>
    <tr>
        <td>照片:</td>
        <td id="pic_td"></td>
    </tr>
    <tr>
        <td>姓名:</td>
        <td id="name_td"></td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td id="age_td"></td>
    </tr>
    <tr>
        <td>好友:</td>
        <td id="friends_td"></td>
    </tr>
</table>

<script>
    let person = {
        name: '传奇哥',
        age: 18,
        friends: ['小明', '小红', '小刚'],
        imgUrl: 'img/fcq.jpg'
    };
    //根据id依次获取4个单元格元素
    let picTd = document.getElementById("pic_td");
    let nameTd = document.getElementById("name_td");
    let ageTd = document.getElementById("age_td");
    let friendsTd = document.getElementById("friends_td");

    //console.log(picTd, nameTd, ageTd, friendsTd);
    //将对象的指定属性值装入单元格中
    nameTd.innerHTML = person.name;
    ageTd.innerHTML = person.age;
    //picTd.innerHTML = person.imgUrl;不可以,需要创建一个图片对象
    let imgE = document.createElement('img');
    imgE.src = person.imgUrl;
    imgE.width = 100;
    picTd.append(imgE);

    //处理好友
    let ulE = document.createElement('ul');
    for(let i=0; i<person.friends.length; i++){
        let liE = document.createElement('li');
        liE.innerHTML = person.friends[i];
        ulE.append(liE);
    }
    friendsTd.append(ulE);
</script>
</body>
</html>
















